<template>
  <div class="coupon">
      <div class="page clearFix">
          <div class="fl content">
              <p>满1500</p>
              <p>减100</p>
              <p>有效期至2017.01.25</p>
          </div>
          <div class="fr get">
              <p>立</p>
              <p>即</p>
              <p>领</p>
              <p>取</p>
          </div>
      </div>
      <div class="page clearFix">
          <div class="fl content">
              <p>满1500</p>
              <p>减100</p>
              <p>有效期至2017.01.25</p>
          </div>
          <div class="fr get">
              <p>立</p>
              <p>即</p>
              <p>领</p>
              <p>取</p>
          </div>
      </div>
      <div class="page clearFix">
          <div class="fl content">
              <p>满1500</p>
              <p>减100</p>
              <p>有效期至2017.01.25</p>
          </div>
          <div class="fr get">
              <p>立</p>
              <p>即</p>
              <p>领</p>
              <p>取</p>
          </div>
      </div>
  </div>
</template>

<script>

export default {
  name: 'Coupon',
  data () {
    return {
      msg: 'message'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.coupon{
    background:#fff;
    width:100%;
    box-sizing:border-box;
    padding:.4rem .4rem;
}
.page{
    border:1px solid #000;
    border-radius:2px;
    padding:.4rem .4rem;
    margin:.3rem 0;

}
.page .content p{
padding:.1rem 0;
}
.page .content p:last-child{
    color:#aaa;
}
.page .get{
    background:#000;
    padding:.2rem .4rem;
}
.page .get p{
    color:#fff;
}

</style>
